<template>
  <div class="posting" :style="{minHeight:$store.state.minHeight+'rem'}">
    <header>
      <img src="../../../static/img/zuojiantou.png" alt="" @click="back">
      <span>发帖</span>
      <span @click="save">发布</span>
    </header>
    <section>
      <div class="txt">
        <textarea name="" id="" cols="30" rows="10" placeholder="想说点什么..." v-model="txtNum"></textarea>
      </div>
      <div class="photo-msg">已选择{{fileList.length}}张图</div>
      <div class="photo">
        <van-uploader v-model="fileList" result-type="dataUrl"  multiple :after-read="afterRead"/>
      </div>
      <div class="txtNum">{{txtNum.length}}/300</div>
    </section>
    <div class="show">
        <div>
          <p><img src="../../../static/img/ft111.png" alt=""><span>显示位置</span></p>
          <p>{{address}}</p>
          <div>
            <img src="../../../static/img/youjiantou003.png" alt="">
          </div>
        </div>
        <div @click="show = true">
          <p><img src="../../../static/img/ft222.png" alt=""><span>动态权限</span></p>
          <p>{{power}}</p>
          <div>
            <img src="../../../static/img/youjiantou003.png" alt="">
          </div>
        </div>
    </div>
    <van-action-sheet v-model="show" :actions="actions" @select="onSelect" />
  </div>
</template>

<script>
  import VDistpicker from 'v-distpicker';
  export default {
    name: "posting",
    data(){
      return {
        show:false,
        txtNum:'',
        fileList:[],
        imgUrl:[],
        actions: [{name:"所有人",val:1},{name:"仅好友",val:2},{name:"仅自己",val:0}],
        power:"所有人",
        address:"",
        powerVal:1,
        src:"",
      }
    },
    components:{
      VDistpicker
    },
    created() {
      var that = this;
      that.$nextTick(res=>{
        // 获取当前详细位置信息
        new BMap.Geolocation().getCurrentPosition(
          function (r) {
            if (this.getStatus() == BMAP_STATUS_SUCCESS) {
              //通过Geolocation类的getStatus()可以判断是否成功定位。
              console.info(r.point);
              new BMap.Geocoder().getLocation(r.point, function (rs) {
                var addComp = rs.addressComponents;
                console.info(addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber)
                that.address = addComp.city + addComp.district;
              });
            }
          },
          {enableHighAccuracy: true}
        );
      })
    },
    mounted() {
      // this.getLocation(); // 调用获取地理位置
    },
    methods: {
      back() {
        this.$router.back()
      },
      afterRead(file){
        let src = file.file;
        console.log(src);
        let files = new FormData();
        files.append('file',src);
        this.src = files;
        this.$axios.post('http://take.zhitiaoxiaoyuan.com/api/common/upload',files,{
          headers:{
            "Content-Type":"multipart/form-data"
          }
        }).then(res=>{
          this.imgUrl.push(res.data.data.url);
          console.log(res)
        });
      },
      onSelect(item) {
        // 默认情况下点击选项时不会自动收起
        // 可以通过 close-on-click-action 属性开启自动收起
        this.show = false;
        this.power = item.name;
        this.powerVal = item.val
      },
      save(){
        console.log(this.imgUrl);

        this.$myAxios('index/Consult/index','post',{
          user_id:this.$myStorage.query(),
          image:this.imgUrl.join(","),
          content:this.txtNum,
          location:this.address,
          headline_id:0,
          type:1,
          power:this.powerVal
        }).then(res=>{
          console.log(res.data);
          if (res.data.state == '1') {
            this.$myNotice("发布成功，请等待审核",2000);
            this.$router.back();
          }else{
            this.$myNotice("网络中断...",2000)
          }
        }).catch(res=>{
          this.error = true;
        });
      }
    },
    watch:{
      txtNum(){
        this.txtNum.length>=300?this.txtNum = this.txtNum.substring(0,300):'';
      }
    }
  }
</script>

<style scoped>
  .posting {
    width: 100%;
    box-sizing: border-box;
    padding-top: .5rem;
    background-color: #F5F5F5;
    font-family: PingFang SC;
  }

  header {
    width: 100%;
    height: .5rem;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 88;
    background: linear-gradient(90deg, rgba(255, 142, 65, 1) 0%, rgba(255, 110, 0, 1) 100%);
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 0 .1rem;
  }

  header > img {
    width: .11rem;
    height: .18rem;
  }

  header > span {
    font-size: .18rem;
    font-weight: 500;
    color: #ffffff;
  }

  section {
    width: 100%;
    background-color: #ffffff;
    box-sizing: border-box;
    padding: .2rem;
    margin-bottom: .1rem;
  }

  .txt {
    font-size: 0;
    margin-bottom: .1rem;
  }

  .txt > textarea {
    width: 100%;
    height: 1.2rem;
    border: none;
    outline: none;
    resize: none;
    font-size: .14rem;
    font-weight: 500;
    color: #333333;
    font-family: PingFang SC;
  }

  .photo-msg {
    height: .2rem;
    width: 100%;
    text-align: right;
    color: #808080;
    font-size: .11rem;
    font-family: PingFang SC;
    font-weight: 500;
    margin-bottom: .1rem;
  }
  .photo {
    width: 100%;
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: space-between;
  }

  .up {
    position: relative;
  }
  .up>input {
    width: 100%;
    height: 100%;
    opacity: 0;
    position: relative;
    z-index: 2;
  }
  .up>p {
    width: 100%;
    height: 100%;
    background-color: #E6E6E6;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
  }
  .up>p>img {
    width: .31rem;
    height: .28rem;
    margin-bottom: .05rem;
  }
  .up>p>span {
    font-size:.13rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #808080;
  }
  .txtNum {
    font-size:.15rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #333333;
    text-align: right;
  }

  .show {
    width: 100%;
    box-sizing: border-box;
    padding: 0 .25rem;
    background-color: #ffffff;
  }
  .show>div {
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: space-between;
  }
  .show>div:nth-child(1){
    border-bottom: .01rem solid #E6E6E6;
  }
  .show>div {
    width: 100%;
    height: .5rem;
  }
  .show>div>img:nth-child(2) {
    width: .08rem;
    height: .13rem;
  }
  .show>div>div img{
    width: .08rem;
    height: .13rem;
    margin-left: .1rem;
  }
  .show>div>p:nth-child(1){
    flex-grow: 1;
  }
  .show>div>p>img {
    width: .13rem;
    height: .16rem;
    margin-right: .1rem;
  }
  .show>div>p>span {
    font-size:.15rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #333333;
  }
  .show>div>p {
    display: flex;
    flex-flow: row;
    align-items: center;
  }


  /*上传图片适配*/
  >>> .van-uploader__upload-icon {
    font-size: .24rem;
  }
  >>> .van-uploader__upload {
    width: .75rem;
    height: .75rem;
    margin: 0 .08rem .08rem 0;
    border-radius: .08rem;
  }
  >>> .van-uploader__preview {
    margin: 0 .08rem .08rem 0;
  }
  >>> .van-uploader__preview-image {
    width: .75rem;
    height: .75rem;
  }
  >>> .van-uploader__preview-delete {
    top: -.08rem;
    right: -.08rem;
    color: #969799;
    font-size: .18rem;
  }
  >>> .van-image-preview__index {
    top: .1rem !important;
    font-size: .14rem !important;
    text-shadow: 0 .01rem .01rem #323233 !important;
  }
  >>> .van-swipe-item {
    width: 3.75rem;
  }
</style>
